@import './vars.css';

:root {
  --transition-fade-in-scale-up-scale: 0.9;
  --transition-fade-in-scale-up-duration: var(--transition-duration);
  --transition-fade-in-scale-up-origin: inherit;
}

.fade-in-scale-up {
  &-leave-active {
    transition:
      opacity var(--transition-fade-in-scale-up-duration)
        var(--transition-ease-in),
      transform var(--transition-fade-in-scale-up-duration)
        var(--transition-ease-in) !important;
    transform-origin: var(--transition-fade-in-scale-up-origin) !important;
  }

  &-enter-active {
    transition:
      opacity var(--transition-fade-in-scale-up-duration)
        var(--transition-ease-out),
      transform var(--transition-fade-in-scale-up-duration)
        var(--transition-ease-out) !important;
    transform-origin: var(--transition-fade-in-scale-up-origin) !important;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0 !important;
    transform: scale(var(--transition-fade-in-scale-up-scale)) !important;
  }

  &-leave-from,
  &-enter-to {
    opacity: 1;
    transform: scale(1) !important;
  }
}
